<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input placeholder="根据操作人名查询" v-model="queryParams.operatorName" clearable class="handle-input mr10"> </el-input>
                <el-button type="primary" icon="el-icon-search" :loading="Switch" @click="Show()">查找</el-button>
                <el-button type="success" icon="el-icon-download" @click="exportTo()">批量导出</el-button>
            </div>
            <el-row>
                <el-col :span="24">
                    <el-tabs type="border-card" @tab-click="opLogTabClickHandle" v-model="queryParams.classify">
                        <el-tab-pane label="登录日志" name="登录日志" >
                            <el-table v-loading="loading"
                                element-loading-text="拼命加载中"
                                element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(0, 0, 0, 0.8)"
                                :data="tableData"
                                border
                                :default-sort = "{prop: 'date', order: 'descending'}"
                                style="width: 100%">
                                <el-table-column prop="content" label="日志内容" width="250"> </el-table-column>
                                <el-table-column prop="classify" label="类别" width="80"> </el-table-column>
                                <el-table-column prop="use" label="应用" width="150"> </el-table-column>
                                <el-table-column prop="module" label="路径" width="180"> </el-table-column>
                                <el-table-column label="状态" width="80" >
                                    <template slot-scope="p">
                                        <div>
                                            <el-tag size="small">{{ p.row.whether ? '成功' : '失败' }}</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTimes"  sortable label="时间" width="180"> </el-table-column>
                                <el-table-column prop="operatorName" label="操作人" width="100"> </el-table-column>
                            </el-table>

                            <div class="pagination">
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="queryParams.pageIndex"
                                    :page-sizes="[10, 20, 30, 40,50]"
                                    :page-size="queryParams.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="countpage"
                                >
                                </el-pagination>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="访问日志" name="访问日志" >
                            <el-table v-loading="loading"
                                element-loading-text="拼命加载中"
                                element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(0, 0, 0, 0.8)"
                                :data="tableData"
                                border
                                :default-sort = "{prop: 'date', order: 'descending'}"
                                style="width: 100%">
                                <el-table-column prop="content" label="日志内容" width="250"> </el-table-column>
                                <el-table-column prop="classify" label="类别" width="80"> </el-table-column>
                                <el-table-column prop="use" label="应用" width="150"> </el-table-column>
                                <el-table-column prop="module" label="路径" width="180"> </el-table-column>
                                <el-table-column label="状态" width="80" >
                                    <template slot-scope="p">
                                        <div>
                                            <el-tag size="small">{{ p.row.whether ? '成功' : '失败' }}</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTimes"  sortable label="时间" width="180"> </el-table-column>
                                <el-table-column prop="operatorName" label="操作人" width="100"> </el-table-column>
                            </el-table>

                            <div class="pagination">
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="queryParams.pageIndex"
                                    :page-sizes="[10, 20, 30, 40,50]"
                                    :page-size="queryParams.pageSize"
                                    layout="total, sizes, prev, pager, next"
                                    :total="countpage"
                                >
                                </el-pagination>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    
                </el-col>
            </el-row>
        </div>
    </div>
</template>

  <script>
import { LogShow } from '@/api/syslogs';
import store from '@/store'

export default {
    data() {
        return {
            tableData: [],
            queryParams: {
                pageIndex: 1,
                pageSize: 10,
                sortedBy: '',
                sortType: '',
                operatorName: '',
                classify:'登录日志' // 根据分类查找
            },
            Switch: false,
            countpage: 0,
            loading: false
        };
    },
    mounted() {
        this.Show();
    },
    methods: {
        //切换访问日志、登录日志
        opLogTabClickHandle(tab, event) {
            console.log("选中的分类：", this.queryParams.classify);
            this.queryParams.pageIndex = 1;
            this.queryParams.pageSize = 10;
            this.Show();
        },
        //导出
        exportTo(){
            //window.location.href="http://localhost:5000/api/SysLogs/DownloadTemplate";
             //方法一 适用于浏览器无法识别文件，如果是html、jpg、pdf等会直接解析展示，而不会下载
            // var url = "http://localhost:50845/api/User/ExportToExcel";
            // window.location.href = url;

            //方法二 文件流下载
            this.$axios({
                method:'get',
                url:'http://localhost:5000/api/SysLogs/Export',
                params: this.queryParams, //查询参数
                headers:{
                    "Authorization" : "Bearer " + store.getters.token
                },
                responseType: 'blob'
            }).then((response)=>{

                console.log(response)

                //获取文件名
                var content = response.headers['content-disposition'];
                var name = content && content.split(';')[2].split("filename*=UTF-8''")[1];
                var fileName = decodeURIComponent(name)
                //获取文件流
                let blob = new Blob([response.data], {type: 'application/octet-stream'})
                let url = window.URL.createObjectURL(blob)
                console.log(url, fileName)
                //动态创建a标签
                let link = document.createElement('a')
                link.href = url;
                link.style.display = 'none';
                link.setAttribute('download',fileName)
                document.body.appendChild(link)
                link.click() //点击a标签

                window.URL.revokeObjectURL(url)
                document.body.removeChild(link)
            })
        },
        Show() {
            this.Switch = true;
            this.loading = true;
            LogShow(this.queryParams).then((o) => {
                this.tableData = o.data.pageList;
                this.countpage = o.data.totalCount;
                this.Switch = false;
                this.loading = false;
            });
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.queryParams.pageSize = val;
            this.Show();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.queryParams.pageIndex = val;
            this.Show();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>